<template>
  <div class="admin">
    <page-header
      v-bind="adminHeaderConfig"
      @searchClick="searchClick"
      @resetClick="resetClick"
    />
    <page-content
      ref="pageContentRef"
      v-bind="adminContentConfig"
      :single-btn-config="singleBtnConfig"
      @singleBtnClick="singleBtnClick"
      @confirmClick="handleConfirmClick"
      @cancelClick="handleCancelClick"
    >
      <template #user="row">
        <div class="user">
          <img alt="1" class="img" :src="row.headPortrait" />
          <div class="info">
            <div class="title">{{ row.userName }}</div>
            <el-button
              size="small"
              plain
              :type="row.roleName ? 'warning' : 'info'"
              >{{ row.roleName ? row.roleName : '未知' }}
            </el-button>
          </div>
        </div>
      </template>
      <template #sex="row">
        <el-button
          size="small"
          plain
          text
          :type="row.sex ? 'success' : 'danger'"
          >{{ row.sex ? '男' : '女' }}
        </el-button>
      </template>
      <template #status="row">
        <el-switch
          @click="changeSwitchStatus(row)"
          :model-value="!!row.status"
        />
      </template>
      <template #uploadImage>
        <upload-image />
      </template>
    </page-content>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import UploadImage from '@/components/upload-image/upload-image.vue'
import PageHeader from '@/components/page-header/page-header.vue'
import adminHeaderConfig from '@/views/main/system/adminUser/AdminUser/config/header-config'
import PageContent from '@/components/page-content/page-content.vue'
import adminContentConfig from '@/views/main/system/adminUser/AdminUser/config/content-config'
import modalEditAndAddConfig from '@/views/main/system/adminUser/AdminUser/config/modal-edit-and-add'
import modalSetRoleConfig from '@/views/main/system/adminUser/AdminUser/config/modal-set-role'
import { SingleBtns } from '@/global/constant'
import { useGlobalStore, useUserStore } from '@/store'
import usePageHeader from '@/hooks/use-page-header'
import type { SingleBtnType } from '@/global/types'

const singleBtnConfig = ref()
const userStore = useUserStore()

// ======================== page-header ========================
const { pageContentRef, searchClick, resetClick } = usePageHeader()

// ========================== page-content =========================
// 1.点击单操作按钮
const singleBtnClick = (type: SingleBtnType) => {
  if (SingleBtns.Add === type || SingleBtns.Edit === type) {
    // 1.1新增和编辑用同一套配置
    singleBtnConfig.value = modalEditAndAddConfig
  }
  if (SingleBtns.SetRole === type) {
    // 从本地请求下来的角色数据给配置加上
    if (modalSetRoleConfig?.form?.items[0]) {
      modalSetRoleConfig.form.items[0].options = useGlobalStore().entriesRole
    }
    singleBtnConfig.value = modalSetRoleConfig
  }
  // 这里可能完善起来要根据按钮是否能打开对话框，这里写死了
  pageContentRef.value?.setModalStatus(true)
}

// 子传父
// 2.点击表单框的确定按钮
const handleConfirmClick = () => {
  singleBtnConfig.value = null
}
const handleCancelClick = () => {
  singleBtnConfig.value = null
}

// 3.封禁/解封账号：单数据操作
const changeSwitchStatus = (row: any) => {
  // 如果当前为true那就去禁用账号, 反之解封账号
  if (row.status) {
    pageContentRef.value?.setCurBtnType(SingleBtns.Banned)
    pageContentRef.value?.setModalStatus(true)
    pageContentRef.value?.setCurRow(row)
  } else {
    userStore.reqUntieDisableUserAction('user', row.userId, 'admin')
  }
}
</script>

<style scoped lang="less">
.admin {
  .user {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }

    .info {
      flex: 1;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .el-button {
        margin-top: 5px;
        //padding: 0 7px;
        font-size: 12px;
      }
    }
  }
}
</style>
